<template>
  <view class="content">
    <view class="page-head">
      <uni-icons class="gap-top" type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
      <text class="white-font gap-top">商品详情</text>
    </view>

    <view class="main-photo">
      <van-image width="20rem" height="20rem" :src="image"></van-image>
    </view>

    <view class="basic-box">
      <view class="basic-item">
        <view class="basic-info">
          <text class="white-font">360 z元素</text>
          <text class="white-content">MG红异端改</text>
        </view>
        <view class="white-content">
          库存：0
        </view>
      </view>

      <van-divider customStyle="border-color:#525252" />

      <text class="white-font">规则说明</text>
      <text class="white-content">MG红异端改</text>
    </view>

    <text>产品详情</text>


  </view>
</template>

<script>
export default {
  name: "mall-detail",
  data() {
    return {
      image: 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/mall-detail-image.png'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
@import 'src/static/scss/common';

page {
  background-color: #0A050B;
}

.page-head {
  display: flex;
  gap: 10px;
  width: 100vw;
  line-height: 88px;
}

.main-photo {
  text-align: center;
  margin: 26rpx 20rpx 0 20rpx;
}

.basic-box {
  background: #1F1F1F;
  margin-top: 26rpx;
  margin-bottom: 26rpx;
  padding: 20rpx 20rpx 20rpx 20rpx;

  display: flex;
  flex-direction: column;

  .basic-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .basic-info {
      display: flex;
      flex-direction: column;
    }
  }
}

</style>
